<!--
 * @author  guojiteng
  调查问卷-设置单选题跳转
-->
<template>
  <div class="question-danxuan-jump">
    <el-form
      ref="danxuanform"
      :model="baseform"
      class="dataForm nomt"
      label-position="right"
      label-width="140px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item label="题干">
            <el-input
              v-model.trim="baseform.stem"
              disabled
              :rows="2"
              type="textarea"
              placeholder="题干这里填写题目描述"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            v-for="(answer, index) in baseform.opts"
            :key="index"
            :label="`选项${index+1}`"
            class="options"
          >
            <el-input
              v-model.trim="baseform.opts[index]"
              placeholder="请输入选项内容"
              :disabled="true"
              @input="changeText($event,index)"
            />
            <el-select v-model="jumpList[index].toid" filterable style="width:500px" clearable placeholder="请选择">
              <el-option
                label="不跳转"
                value=""
              />
              <el-option
                v-for="item in qList"
                :key="item.id"
                :label="item.stem"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { number } from '@/utils/validate'
export default {
  name: 'Danxuan',
  props: {
    type: {
      type: String,
      default: '10'
    },
    getData: {
      type: Object,
      default: () => { }
    },
    qList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      baseform: {
        stem: '',
        opts: ['', '', '', '']
      },
      questionList: [],
      jumpList: []
    }
  },
  created() {
    if (this.getData && this.getData.id) {
      try {
        this.questionList = this.qList
        const answer = JSON.parse(this.getData.answer)
        this.$set(this.baseform, 'stem', this.getData.stem)
        this.$set(this.baseform, 'opts', answer.opts)
        if (this.getData.questionSkip && this.getData.questionSkip !== '') {
          this.jumpList = JSON.parse(this.getData.questionSkip)
          if (this.jumpList.length < answer.opts.length) {
            // 如果存在有没设置的，去给默认设置
            this.setJumpDefault(this.jumpList, answer.opts)
          }
        } else {
          this.setJumpList(answer.opts)
        }
      } catch (error) {
        this.$message({
          type: 'error',
          message: '参数异常，请重试!',
          onClose: () => {
            this.$router.back()
          }
        })
      }
    }
  },
  methods: {
    getJson() {
      return JSON.stringify(this.jumpList.filter(a => {
        return a.toid !== ''
      }))
    },
    // 设置默认的跳转
    setJumpDefault(cur, list) {
      let filterList = list
      for (const i in cur) {
        filterList = filterList.filter(a => {
          return cur[i].value1 !== a
        })
      }
      this.setJumpList(filterList)
    },
    setJumpList(list) {
      for (let i = 0; i < list.length; i++) {
        const obj = {
          type: 'acc',
          value1: list[i],
          toid: ''
        }
        this.jumpList.push(obj)
      }
      console.log('jumpList', this.jumpList)
    },
    changeText(e, index) {
      if (e === '其他') {
        this.baseform.opts[index] = '其 他'
      }
    }
  }
}
</script>

<style lang="scss">
.question-danxuan-jump {
  .el-radio-group {
    width: 100%;
  }
  .options .el-form-item__content {
    display: flex;
    align-items: center;
    .el-input {
      margin-right: 10px;
    }
  }
  .option-rightasnwer {
    display: inline-block;
    flex-shrink: 0;
    font-size: 14px;
    color: green;
    width: 90px;
    margin-right: 20px;
  }
  .order-fixed {
    margin: 10px 0;
    padding-left: 100px;
  }
  .remove-option {
    cursor: pointer;
  }
  .add-optiopn {
    margin-left: 100px;
    margin-bottom: 10px;
  }
  .tip {
    padding-left: 100px;
    padding-bottom: 10px;
    color: red;
  }
}
</style>
